<template>
  <view
    class="info-wrapper"
    @tap="loginHandle"
  >
    <view class="user-avatar">
      <maya-login-btn ref="login">
        <template v-slot:button></template>
      </maya-login-btn>
      <view>
        <u--image
          width="124rpx"
          height="124rpx"
          shape="circle"
          class="avatar"
          :src="info.avatar || normalAvatar"
        ></u--image>
      </view>
      <u--image
        v-if="isCloudAdopt"
        class="cloud-adopt-bg"
        src="/static/mine/icon_mine_avatar_bg.png"
        width="152rpx"
        height="184rpx"
      ></u--image>
    </view>
    <view
      v-if="isLogin"
      class="flex flex-y flex-1 user-info"
    >
      <view class="name-container flex align-center">
        <view class="nick-name">{{ info.nickname }}</view>
        <userMedal
          :name="info.maxBadgeBenefit"
          :benefit-id="info.maxBadgeBenefitId"
        ></userMedal>
      </view>
      <view class="user-role flex">
        <view
          class="role-normal"
          :class="{ pass: info.adoptFlag === QUALIFICATION_FLAG.PASS }"
        >
          领养人
        </view>
        <view
          class="role-normal"
          :class="{ pass: info.giverFlag === QUALIFICATION_FLAG.PASS }"
        >
          送养人
        </view>
      </view>
      <view class="flex mine-sta">
        功德值 {{ cloudAdoptCount }}
        <view class="line">|</view>
        爱心能量 {{ benefitCount }}
      </view>
    </view>
    <view
      v-if="!isLogin"
      class="no-login"
    >
      请先使用抖音用户信息授权登录
    </view>
  </view>
</template>

<script>
import userMedal from '@/components/medal/user-medal.vue';
import mayaLoginBtn from '@/components/maya-login-btn.vue';
import { QUALIFICATION_FLAG } from '@/const/index.js';
import { mapGetters } from 'vuex';
const normalAvatar = require('../../../static/mine/ic_default_avatar.png');
export default {
  components: {
    userMedal,
    mayaLoginBtn,
  },
  props: {
    info: {
      type: Object,
      value: () => ({}),
    },
    isCloudAdopt: {
      type: Boolean,
      value: false,
    },
    benefitCount: {
      type: Number,
      value: 0,
    },
    cloudAdoptCount: {
      type: Number,
      value: 0,
    },
  },
  computed: {
    ...mapGetters(['isLogin']),
  },
  data() {
    return {
      QUALIFICATION_FLAG,
      normalAvatar,
    };
  },
  methods: {
    loginHandle() {
      if (!this.isLogin) {
        this.$refs.login.getMpUserInfo();
      }
    },
  },
};
</script>

<style lang="scss">
.info-wrapper {
  background-color: #ffffff;
  width: 100%;
  height: 218rpx;
  border-radius: 24rpx;
  display: flex;
  flex-direction: row;
  .user-avatar {
    position: relative;
    width: 152rpx;
    margin-left: 32rpx;
    .cloud-adopt-bg {
      position: absolute;
      top: 0;
    }
    .avatar {
      position: absolute;
      top: 46rpx;
      left: 16rpx;
      right: 0;
    }
  }
  .user-info {
    margin: 42rpx 0rpx 0rpx 40rpx;
    .nick-name {
      color: #333333;
      font-size: 36rpx;
      font-weight: 500;
    }
  }
  .user-role {
    margin-top: 16rpx;
    .role-normal {
      background-color: #e4ffd9;
      font-size: 20rpx;
      color: rgba(61, 61, 61, 0.5);
      width: 80rpx;
      text-align: center;
      border-radius: 20rpx;
      margin-right: 12rpx;
      padding: 0 8rpx;
    }
    .pass {
      color: #36c300;
      background-color: $btn-primary-color;
    }
  }
  .mine-sta {
    font-size: 24rpx;
    color: #3d3d3d;
    margin-top: 16rpx;
    .line {
      color: #e7e7e7;
      margin: 0 16rpx;
    }
  }
  .no-login {
    font-size: 32rpx;
    color: #333;
    text-align: center;
    align-items: center;
    display: flex;
    font-weight: 500;
    justify-content: center;
    height: 100%;
  }
}
</style>
